<template>
	<view class="u-p-30">
		<view class="combox u-p-l-50">
			<view class="text-center u-p-t-70" v-if="stateInfo == 0">
				<view>
					<image src="@/static/images/shenhe.png" mode="" style="width: 100px;height: 100px;"></image>
				</view>
				<view class="u-font-18 f-w u-p-b-30 u-p-t-30">
					请等待审核
				</view>
			</view>
			<view class="text-center u-p-t-70" v-else-if="stateInfo == 1">
				<view>
					<image src="@/static/images/succ.png" mode="" style="width: 100px;height: 100px;"></image>
				</view>
				<view class="u-font-18 f-w u-p-b-30 u-p-t-30">
					恭喜您，已通过审核
				</view>
			</view>
			<view class="text-center u-p-t-70" v-else-if="stateInfo == 2">
				<view>
					<image src="@/static/images/bohui.png" mode="" style="width: 100px;height: 100px;"></image>
				</view>
				<view class="u-font-18 f-w u-p-b-30 u-p-t-30">
					平台拒绝了您的申请
				</view>
				<view class="u-m-t-80" @click="back">
					<u-button type="primary" shape="circle" text="重新填写" @click="onchange"></u-button>
				</view>
			</view>
			<view v-else>
				<u--form labelPosition="left" :model="clientInfo" ref="uForm">
					<u-form-item :labelWidth='100' label="所属类别" :required="true" borderBottom @click="handShowtype(0)"
						ref="item1">
						<u--input v-model="clientInfo.cateName" disabled disabledColor="#ffffff" placeholder="请选择所属类别"
							border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<u-form-item :labelWidth='100' label="店铺名称" :required="true" borderBottom ref="item1">
						<u--input v-model="clientInfo.merchantName" border="none" placeholder="请输入店铺名称"></u--input>
					</u-form-item>
					<u-form-item :labelWidth='100' label="姓名" :required="true" borderBottom ref="item1">
						<u--input v-model="clientInfo.contacts" border="none" placeholder="请输入姓名"></u--input>
					</u-form-item>
					<u-form-item :labelWidth='100' label="电话" :required="true" borderBottom ref="item1">
						<u--input v-model="clientInfo.contactsTel" border="none" placeholder="请输入电话"></u--input>
					</u-form-item>
					<u-form-item :labelWidth='100' label="身份证正面" :required="true" borderBottom ref="item1"
						labelPosition='top'>
						<view class="u-m-auto u-m-t-30">
							<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
								:maxCount="1" width="250" height="180" :previewFullImage="false"
								:capture="['album','camera']">
								<image src="@/static/images/idfont.png" mode="widthFix"
									style="width: 250px;height: 180px;text-align: center;"></image>
							</u-upload>
						</view>
						<view class="u-m-auto u-m-t-30">
							<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
								:maxCount="1" width="250" height="180" :previewFullImage="false"
								:capture="['album','camera']">
								<image src="@/static/images/idback.png" mode="widthFix"
									style="width: 250px;height: 180px;text-align: center;"></image>
							</u-upload>
						</view>
					</u-form-item>
					<u-form-item :labelWidth='100' label="营业执照" :required="true" borderBottom ref="item1"
						labelPosition='top'>
						<view class="u-m-auto u-m-t-30">
							<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
								:maxCount="1" width="250" height="180" :previewFullImage="false"
								:capture="['album','camera']">
								<image src="@/static/images/yingye.png" mode="widthFix"
									style="width: 250px;height: 150px;">
								</image>
							</u-upload>
						</view>
					</u-form-item>
				</u--form>
				<view class="u-m-t-50 u-wdd-60 u-m-auto">
					<u-button shape="circle" type="primary" text="提交" :throttleTime='3000' @tap="submit"></u-button>
				</view>
				<!-- 客户列表 -->
				<u-picker :show="showtype" :columns="comList" keyName="title" @cancel='showtype = false'
					@confirm='choosePick'></u-picker>
			</view>
		</view>
	</view>
</template>

<script>
	import url from '@/config/url.js';
	export default {

		data() {
			return {
				clientInfo: {
					idCardFront: "",
					idCardBack: "",
					licenseUrl: ""
				},
				comList: [],
				catelist: [], // 分类
				showtype: false,
				uploadUrl: url.upload,
				fileList1: [],
				fileList2: [],
				fileList3: [],
				stateInfo: ""
			};
		},

		onShow() {
			this.getmerchantCheckInJudge();
			this.getcatelist()
		},
		methods: {
			onchange() {
				this.stateInfo = -1
			},
			getmerchantCheckInJudge() {
				uni.showLoading({
					icon: 'none',
					title: '加载中'
				})
				this.$api.merchantCheckInJudgeApi().then(res => {
					console.log(res);
					this.stateInfo = res.data
					console.log(this.stateInfo);
					
					uni.hideLoading()
				})
			},
			submit() {
				if (!this.clientInfo.cateName || !this.clientInfo.merchantName || !this.clientInfo.contacts || !this
					.clientInfo.contactsTel || !this.clientInfo.idCardFront || !this.clientInfo.idCardBack || !this
					.clientInfo.licenseUrl) {
						uni.$u.toast('请填写完整的信息')
						return
				}
				
				this.$api.merchantCheckInApi(this.clientInfo).then(res => {
					if (res.code == 200) {
						uni.$u.route('/pages/shop/checkWrite')
					}
				})
			},
			handShowtype() {
				this.showtype = true;
				this.comList = this.catelist;
			},
			// 选择pick
			choosePick(e) {
				const {
					columnIndex,
					index,
					value,
					picker = this.$refs.uPicker
				} = e // 微信小程序无法将picker实例传出来，只能通过ref操作

				this.clientInfo.cateId = value[0].id
				this.clientInfo.cateName = value[0].title
				this.showtype = false;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					let resultArr = JSON.parse(result);
					console.log(resultArr)
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: resultArr,
						fileName: resultArr.data.ossName,
						fileUrl: resultArr.data.ossUrl,
					}))
					fileListLen++
				}



				if (this.fileList1.length > 0) {
					this.clientInfo.idCardFront = this.fileList1[0].fileUrl
				}

				if (this.fileList2.length > 0) {
					this.clientInfo.idCardBack = this.fileList2[0].fileUrl
				}

				if (this.fileList3.length > 0) {
					this.clientInfo.licenseUrl = this.fileList3[0].fileUrl
				}

			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.uploadUrl, //上传的路径
						filePath: url,
						name: 'file',
						formData: {
							token: uni.getStorageSync('token'),
						},
						header: {
							Authorization: "Bearer " + uni.getStorageSync('token'),
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data)
							}, 1000)
						}
					});
				})
			},

			getcatelist() {
				this.$api.catelistApi().then(res => {
					this.catelist = [res.data]
				})
			}

		}
	};
</script>
<style scoped lang="scss">

</style>